<template>
  <div class="inextension">
    <el-card class="box-card">
      <div slot="header" class="inextension_header">
        <span>事件管理信息</span>
        <div>
          <el-button type="primary" icon="el-icon-arrow-left" @click="$emit('back')">返回</el-button>
          <el-button type="defalut" icon="el-icon-download" :loading="downloadLoading" @click="doExport">导出</el-button>
          <!-- <el-button type="defalut" icon="el-icon-download" @click="doExport" >打印督办单</el-button> -->
          <el-button v-if="info.status==12" v-permission="['admin', 'tEvent:print']" class="filter-item" size="mini" type="warning" @click="doToAduit">指派审批</el-button>
          <el-button v-if="info.status==2||info.status==3||info.status==4||info.status==13" v-permission="['admin', 'tEvent:print']" class="filter-item" size="mini" type="warning" @click="$refs.printPage.open(info)">打印督办单</el-button>
        </div>
      </div>
      <div class="inextension_container">
        <el-tabs v-model="tabsactive" @tab-click="tabclick">
          <el-tab-pane label="基本信息" name="essentiale">
            <essential v-if="tabsactive=='essentiale'" :id="zyzid" :info="info2" :dict="dict" />
            <el-divider content-position="center">处理</el-divider>
            <dispute :id="zyzid" :allpending="allpending" :is-status="info.status==10||info.status==7" :aduit-type="aduitType" :list="list" :auditstepslist="auditstepslist" type-text="处理" @getRefash="tabclick" @back="$emit('back')" />
          </el-tab-pane>
          <el-tab-pane label="争议记录" name="dispute">
            <dispute v-if="tabsactive=='dispute'" :id="zyzid" :allpending="allpending" :is-status="info.status==9||info.status==5" :aduit-type="aduitType" :list="list" :auditstepslist="auditstepslist" type-text="争议" @getRefash="tabclick" @back="$emit('back')" />
          </el-tab-pane>
          <el-tab-pane label="延期记录" name="extension">
            <!-- <extension :id="id" :extension-list="list" @getRefash="tabclick" /> -->
            <dispute v-if="tabsactive=='extension'" :id="zyzid" :allpending="allpending" :is-status="info.status==8||info.status==6" :aduit-type="aduitType" :list="list" :auditstepslist="auditstepslist" type-text="延期" @getRefash="tabclick" @back="$emit('back')" />
          </el-tab-pane>
          <!-- <el-tab-pane label="处理记录" name="deal">
            <deal :id="id" :deal-list="list" @updatalist="updatalist" @openxq="openxq" @getRefash="tabclick" />
            <dispute v-if="tabsactive=='deal'" :id="zyzid" :allpending="allpending" :is-status="info.status==10||info.status==7" :aduit-type="aduitType" :list="list" :auditstepslist="auditstepslist" type-text="处理" @getRefash="tabclick" @back="$emit('back')" />
          </el-tab-pane> -->
          <!-- <el-tab-pane label="投诉记录" name="complaint">
            <complaint :id="id" :complaint-list="complaintList" @updatalist="updatalist" @getRefash="tabclick" />
          </el-tab-pane>
          <el-tab-pane label="礼品兑换记录" name="exchange">
            <exchange :id="id" :exchange-list="exchangeList" @getRefash="tabclick" />
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </el-card>
    <!-- 打印详情 -->
    <print-page ref="printPage" />
  </div>
</template>
<script>
//   import { getfeedbackByidRequest, getdisputedisputeByUserIdRequest, getdisputedisputeByidRequest } from '@/api/volunteerap/index'
//   import { getgiftedByidlistByUserIdRequest } from '@/api/volunteerap/gift'
import { selectTObjectionList, tHandleLog, selectTEvent } from '@/api/system/tEvent'
import essential from './information/essential.vue'
import dispute from './information/dispute.vue'
import deal from './information/deal.vue'
import { downloadFile } from '@/utils/index'
import { download } from '@/api/data'
import printPage from './print.vue'
import { ExportBriefDataDocx } from '@/utils/exportWordImage'
export default {
  name: 'TEventView',
  components: {
    essential,
    dispute,
    deal,
    printPage
  },
  props: {
    zyzid: {
      type: String,
      default: ''
    },
    allpending: {
      type: Number,
      default: 1
    },
    aduitType: {
      type: Number,
      default: 1
    }
  },
  dicts: ['event_status', 'event_souce'],
  data() {
    return {
      type: 0,
      page: 1,
      limit: 10,
      tabsactive: 'essentiale',
      id: this.zyzid, // 当前id
      list: [],
      auditstepslist: [],
      info: {},
      info2: {},
      downloadLoading: false,
      host: process.env.VUE_APP_BASE_API,
      wordData: {}
    }
  },
  watch: {
    zyzid: {
      deep: true,
      immediate: true,
      handler(val) {
        const params = { id: val }
        selectTEvent(params).then(res => {
          // this.info = res
          this.info = JSON.parse(JSON.stringify(res))
          this.info2 = res
          // setTimeout(()=>{
          //   this.fomatData()
          // },1000)
        })
        this.tabclick({ index: 0 })
      }
    }
  },
  created() {},
  methods: {
    // init(){
    //   let params ={id :this.zyzid}
    //   selectTEvent(params).then(res => {
    //       this.info = res
    //   })

    // },
    fomatData() {

    },
    doToAduit() {
      this.$confirm(`确认审核该条数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudTEvent.edit({ id: this.zyzid, status: 1 }).then(res => {
          this.$message({
            type: 'success',
            message: '审核成功'
          })
          // this.crud.refresh()
        })
      }).catch(() => {
      })
    },
    // 导出
    doExport() {
      this.downloadLoading = true
      const attachmentsBefore = []
      const attachmentsAfter = []
      this.info.attachments && this.info.attachments.forEach(async o => {
        if (o.type == 1) {
          o.url = await this.getBase64Sync(this.host + o.url)
          attachmentsBefore.push(o)
        } else if (o.type == 2) {
          o.url = await this.getBase64Sync(this.host + o.url)
          attachmentsAfter.push(o)
        }
        if ((attachmentsAfter.length + attachmentsBefore.length) == this.info.attachments.length) {
          this.wordData = {
            eventDesc: this.info.eventDesc,
            linearName: this.info.linear && this.info.linear.name ? this.info.linear.name : '-',
            rpunit: this.info.rpunit && this.info.rpunit.name ? this.info.rpunit.name : '-',
            souce: this.dict.event_souce.find(i => i.value == this.info.souce).label,
            status: this.dict.event_status.find(i => i.value == this.info.status).label,
            evaluationItems: this.info.evaluationDtl ? this.info.evaluationDtl.evaluation.evaluationItems : '-',
            evaluationDtlName: this.info.evaluationDtl ? this.info.evaluationDtl.name : '-',
            assistanceUnit: this.info.assistanceUnit ? this.info.assistanceUnit.map(i => i.name).join('；') : '-',
            point: this.info.point ? this.info.point : '-',
            attachmentsBefore: attachmentsBefore,
            attachmentsAfter: attachmentsAfter
          }
          const imgSize = {
            imgurl: [315, 215]// 控制导出的word图片大小
          }
          const fileName = `${this.info.linear.name}点位问题整改回复.docx`
          ExportBriefDataDocx(`${'/eventTmp'}.docx`, this.wordData, fileName, imgSize)
          this.downloadLoading = false
        }
      })
    },
    openxq() {
      this.$emit('openedd')
    },
    updatalist() {
      this.tabclick()
    },
    getBase64Sync(imgUrl) {
      return new Promise(function(resolve, reject) {
        // 一定要设置为let，不然图片不显示
        const image = new Image()
        // 图片地址
        image.src = imgUrl
        // 解决跨域问题
        image.setAttribute('crossOrigin', '*') // 支持跨域图片
        // image.onload为异步加载
        image.onload = function() {
          const canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          const context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          // 图片后缀名
          const ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase()
          // 图片质量
          const quality = 0.8
          // 转成base64
          const dataurl = canvas.toDataURL('image/' + ext, quality)
          // 返回
          resolve(dataurl)
        }
      })
    },
    tabclick(pages) {
      // debugger
      // this.tabsactive = pages
      const params = { id: this.zyzid, type: pages.index == 0 ? 3 : pages.index }
      // 表格
      selectTObjectionList(params).then(res => {
        this.list = res
        res.forEach(element => {
          if (pages.index == 1) {
            element.attachments.map(i => i.type == 2)
            // this.attachments.splice(0,0,element.attachments.filter(i=>i.type==2))
          }
          if (pages.index == 2) {
            element.attachments.map(i => i.type == 3)
            // this.attachments.splice(0,0,element.attachments.filter(i=>i.type==3))
          }
          if (pages.index == 3 || pages.index == 0) {
            element.attachments.map(i => i.type == 5)
            // this.attachments.splice(0,0,element.attachments.filter(i=>i.type==5))
          }
        })
      })
      // 审批
      // tHandleLog(params).then(res => {
      //     this.auditstepslist = res
      // })

      this.auditstepslist = [{ userName: '管理员' }]
      // if (this.tabsactive == 'deal') {
      //   const params = {}
      //   params.userId = this.zyzid
      //   params.page = pages.page || this.page
      //   params.limit = pages.limit || this.limit
      //   params.type = 0
      //   getfeedbackByidRequest(params).then(res => {
      //     this.dealList = res.data
      //   })
      // } else if (this.tabsactive == 'complaint') {
      //   const params = {}
      //   params.userId = this.zyzid
      //   params.page = pages.page || this.page
      //   params.limit = pages.limit || this.limit
      //   params.type = 1
      //   getfeedbackByidRequest(params).then(res => {
      //     this.complaintList = res.data
      //   })
      // } else if (this.tabsactive == 'exchange') {
      //   const params = {}
      //   params.page = pages.page || this.page
      //   params.limit = pages.limit || this.limit
      //   params.userId = this.zyzid
      //   getgiftedByidlistByUserIdRequest(params).then(res => {
      //     if (res.code == 200) {
      //       this.exchangeList = res.data
      //     }
      //   })
      // } else if (this.tabsactive == 'dispute') {
      //   const params = {}
      //   params.page = pages.page || this.page
      //   params.limit = pages.limit || this.limit
      //   params.userId = this.zyzid
      //   getdisputedisputeByidRequest(params).then(res => {
      //     this.disputeList = res.data
      //   })
      // } else if (this.tabsactive == 'extension') {
      //   const params = {}
      //   params.page = pages.page || this.page
      //   params.limit = pages.limit || this.limit
      //   params.userId = this.zyzid
      //   getdisputedisputeByUserIdRequest(params).then(res => {
      //     this.extensionList = res.data
      //     console.log(this.extensionList, 'kko')
      //   })
      // }
    },
    // 返回
    back() {
      this.$emit('back')
    }
  }
}
</script>
  <style lang="scss">
  .box-card {
    .inextension_header {
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      color: #484848;
    }
  }
  .con_title {
    display: flex;
    align-items: center;
    line-height: 40px;
    background: #ecf0f6;
    border-radius: 50px;
    margin-top: 1rem;
    span {
      color: #252d57;
      font-weight: bold;
    }
    .con_title_y {
      width: 16px;
      height: 16px;
      background: #ffffff;
      margin: 0 7px 0 15px;
      border: 3px solid #247fff;
      border-radius: 50%;
    }
  }
  .servicce_fwjl {
    margin-top: 1.5rem;
    padding: 1rem 0;
    background: #fcfcfc;
    border: 1px solid #cacaca;
    border-radius: 8px;
    .fwjl_t {
      text-align: right;
      color: #999999;
      font-family: Microsoft YaHei;
      font-size: 16px;
    }
    .fwjl_c {
      color: #666666;
      font-size: 16px;
    }
    .el-col {
      margin: 0.45rem 0;
    }
  }
  .con_title2 {
    margin-top: 2rem;
  }
  .shjl_div {
    margin-top: 1rem;
    .lineList {
      display: flex;
      align-items: center;
      margin: 7px 0;
      padding: 0 1rem;
      line-height: 40px;
      background: #fcfcfc;
      border: 1px solid #cacaca;
      border-radius: 8px;
    }
    span {
      color: #999999;
      font-size: 16px;
    }
    .shjl_yd {
      width: 8px;
      height: 8px;
      background: rgba(153, 153, 153, 0.39);
      border-radius: 50%;
      margin-right: 1rem;
    }
    .shjl_con {
      color: #666666;
      font-size: 16px;
      margin-right: 2.6rem;
      font-family: 'Microsoft YaHei';
    }
  }
  </style>
